<template>
    <div>
        <h2>自律一下</h2>
        <input type="text" v-model="newTodoTitle" placeholder="添加新的待办事项">
        <button @click="addTodo">添加</button>
        <ul>
            <todo-item v-for="(todo, index) in todos" :key="index" :title="todo.title" :completed="todo.completed"
                @update:completed="updateTodoCompleted(index, $event)" @remove-todo="removeTodo(index)" />
        </ul>
    </div>
</template>

<script>
import TodoItem from './TodoItem.vue';  

export default {
    components: {
        TodoItem
    },
    data() {
        return {
            todos: [],
            newTodoTitle: '' 
        };
    },
    methods: {
        addTodo() {
            if (this.newTodoTitle.trim() !== '') {
                this.todos.push({
                    title: this.newTodoTitle,
                    completed: false
                });
                this.newTodoTitle = ''; 
            }
        },
        removeTodo(index) {
            this.todos.splice(index, 1);
        },
        updateTodoCompleted(index, completed) {
            this.todos[index].completed = completed;
        }
    }
};
</script>